<template>
  <div id="page-box">
    <h3 class="damiao-title" ref="ggb">短链接生成平台</h3>
    <input-box></input-box>
     <result-box />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import inputBox from "./components/input-box.vue";
import ResultBox from "./components/result-box.vue";


interface Colorconfig {
  fontColor: string;
  shadowColor: string;
}

@Component({
  components: {
    inputBox,
    ResultBox
  }
})
export default class App extends Vue {
  // mounted 生命周期
  mounted(): void {
    this.init();
  }
  /**
   * 模拟跑马灯效果
   */
  init(): void {
    const oTitle: any = this.$refs.ggb;
    let texts:string = "";
    // 定义颜色
    const fontColors: Array<Colorconfig> = [
      {
        fontColor: "#C44032",
        shadowColor: "#5E1F18"
      },
      {
        fontColor: "#C93929",
        shadowColor: "#872E24"
      },
      {
        fontColor: "#C14234",
        shadowColor: "#832C23"
      },
      {
        fontColor: "#CD4F41",
        shadowColor: "#923228"
      },
      {
        fontColor: "#DA5D4F",
        shadowColor: "#AC3E31"
      },
      {
        fontColor: "#EA6252",
        shadowColor: "#BD4537"
      },
      {
        fontColor: "#F46655",
        shadowColor: "#BF4334"
      }
    ];

    const setColor = (fontColor: Array<Colorconfig>) => {
      texts = "";
      Array.from(oTitle.innerText).forEach((text: any, index: number): void => {
        texts += `<span style="color:${fontColor[index].fontColor};text-shasow:text-shadow: 0 0 0 ${fontColor[index].shadowColor},
           0 0 3px ${fontColor[index].shadowColor}, 0 0 6px ${fontColor[index].shadowColor}, 0 0 9px ${fontColor[index].shadowColor},
    0 0 12px ${fontColor[index].shadowColor};">${text}</span>`;
      });
      oTitle.innerHTML = texts;
    };
    setColor(fontColors);

    setInterval((): void => {
      const fontColor: Colorconfig | any = fontColors.pop();
      fontColors.unshift(fontColor);
      setColor(fontColors);
    }, 100);
  }
}
</script>

<style lang="stylus"></style>
<style scoped>
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

#page-box {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.damiao-title {
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 55px;
  position: relative;
  top: 10%;
  letter-spacing: 5px;
  color: #fcd8d4;
  text-shadow: 0 0 0 #b23131, 0 0 3px #b23131, 0 0 6px #b23131, 0 0 9px #b23131,
    0 0 12px #b23131;
}
</style>
